<template>
	<el-dialog title="图集整理" :visible="imageLibray.cropperImg" width="806px" :before-close="handleCancel" class="imgset-sub-dialog">
		<el-container>
			<el-main class="img-wrapper">
				<div class="image_crop" v-for="(item,index) in primeval_img" v-if="select_img==item.value">
					<vueCropper ref="cropper" :img="item.value" :outputSize="option.outputSize" :outputType="option.outputType" :info="true"
					 :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original"
					 :autoCrop="option.autoCrop" :autoCropWidth="item.width" :autoCropHeight="item.height" :fixedBox="option.fixedBox"
					 :mode="option.mode">
					</vueCropper>
				</div>

				<div class="img-abbre">
					<ul>
						<li v-for="(item,index) in images" @mouseenter="showIcon(index)" @mouseleave="hideIcon(index)" @click="select_cropper_img(item.value)">
							<img :src="item.value">
							<el-tooltip content="删除图片" placement="top">
								<i class="iconfont icon-delete-two" v-show="item.visibleIcon" @click.stop="delImg(index)"></i>
							</el-tooltip>
							<el-tooltip content="更换图片" placement="bottom">
								<i class="iconfont icon-icon--" v-show="item.visibleIcon"></i>
							</el-tooltip>
						</li>
						<li v-for="(item,index) in blank"><i class="iconfont icon-add" @click="openImgset"></i></li>
					</ul>
				</div>
			</el-main>
			<el-aside class="img-operate" width="160px">
				<div class="block">
					<div class="demonstration">动画持续时间：{{ animateDuration }} 秒</div>
					<el-slider v-model="animateDuration" :step="0.1" :show-tooltip="false" :min="0.1" :max="1.0">
					</el-slider>
				</div>
				<div class="block">
					<div class="demonstration">动画延迟时间：{{ animateDelay }} 秒</div>
					<el-slider v-model="animateDelay" :step="0.1" :show-tooltip="false" :min="0.1" :max="1.0">
					</el-slider>
				</div>
				<div class="block">
					<div class="demonstration marbottom-10">切换效果：</div>
					
					<el-dropdown placement="bottom-start" @command="handleCommand" trigger="click">
						<el-button plain size="mini">
							<div class="flex-between">
								{{ animationName }}<i class="el-icon-arrow-down el-icon--right"></i>
							</div>
						</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-scrollbar style="height:100%" class="animate-scrollbar">
								<el-dropdown-item :command="index" v-for="(animate, index) in dropdownList" :key="index">{{ animate.name }}</el-dropdown-item>
							</el-scrollbar>
						</el-dropdown-menu>
					</el-dropdown>
					
				</div>

			</el-aside>
		</el-container>
		<img :src="img">
		<span slot="footer" class="dialog-footer">
			<el-button @click="handleCancel">取 消</el-button>
			<el-button type="primary" @click.stop="handleConfirm">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
// 	import {
// 		VueCropper
// 	} from 'vue-cropper'
	import VueCropper from '../vue-cropper/vue-cropper.vue'
	import {
		ANI_NAME
	} from '@/const/animation-match.js'
	export default ({
		name: 'CropperImg',
		computed: {
			imageLibray() {
				return this.$store.getters.image_libray
			},
			images() {
				return this.primeval_img
			},
			blank() {
				var blankImg = []
				for (var i = 0; i < 6 - this.images.length; i++) {
					blankImg.push(i)
				}
				return blankImg
			}

		},
		data() {
			return {
				option: {
					outputSize: 1, //剪切后的图片质量（0.1-1）
					full: false, //输出原图比例截图 props名full
					outputType: 'png',
					canMove: true,
					original: false,
					canMoveBox: true,
					autoCrop: true,
					fixedBox: false,
					mode: 'contain'
				},
				select_img: "",
				cropperResult: [],
				primeval_img: [],
				visibleIcon: false,
				img: "",
				animateDuration: 0,
				animateDelay: 0,
				animationName: '没有',
				animationClass: '',
				dropdownList: ANI_NAME
			}
		},
		created() {
			const imgs = this.$store.getters.imageSetUrls
			if (imgs && imgs.length > 0) {
				this.select_img = this.$store.getters.imageSetUrls[0]
				for (let item in imgs) {
					this.primeval_img.push({
						visibleIcon: false,
						value: imgs[item],
						top: 0,
						left: 0,
						width: 200,
						height: 340,
						url: ""
					})
				}
			}
		},
		methods: {
			//下载图片
			down(index) {
				for (let cropper in this.$refs.cropper) {
					this.$refs.cropper[cropper].getCropData((data) => {
						this.primeval_img[index].value = data
					})
				}
			},
			handleCancel() {
				this.$store.commit('IMAGE_LIBRAY', false)
			},
			handleConfirm() {
				this.down(this.getSelectImgIndex())
				setTimeout(() => {
					var resultval = {
						animation: this.animationClass,
						animateDuration: this.animateDuration,
						animateDelay: this.animateDelay,
						imgs: this.primeval_img
					}
					this.imageLibray && this.imageLibray.callback && this.imageLibray.callback(resultval)

				}, 500)
				this.$store.commit('SET_IMAGESETS', [])
				this.handleCancel()
			},
			//选中裁剪图片
			select_cropper_img(img) {
				const index = this.getSelectImgIndex()
				this.down(index)
				// 设置裁剪框的信息
				// this.setClippingBox(index)
				this.select_img = img
			},
			// 显示图标
			showIcon(index) {
				this.primeval_img[index].visibleIcon = true
			},
			// 隐藏图标
			hideIcon(index) {
				this.primeval_img[index].visibleIcon = false
			},
			// 设置裁剪框的信息
			// 			setClippingBox(index) {
			// 				for (let cropper in this.$refs.cropper) {
			// 获取裁剪框的位置信息
			// const position = this.$refs.cropper[cropper].getCropAxis()
			// 					this.primeval_img[index].top = position.y1
			// 					this.primeval_img[index].left = position.x1
			// 					this.primeval_img[index].width = this.$refs.cropper[cropper].cropW
			// 					this.primeval_img[index].height = this.$refs.cropper[cropper].cropH
			// 					this.$refs.cropper[cropper].getCropData((data) => {
			// 						console.log(data)
			//
			// 						this.primeval_img[index].value = data
			// 					})
			// 				}
			// 			},
			// 删除图片
			delImg(index) {
				if (this.primeval_img.length > 1) {
					if (index == 0) {
						this.select_img = this.primeval_img[index + 1].value
					} else {
						this.select_img = this.primeval_img[index - 1].value
					}
					this.primeval_img.splice(index, 1)
					var img_url = []
					for (let item in this.primeval_img) {
						img_url.push(this.primeval_img[item].value)
					}
					this.$store.commit('SET_IMAGESETS', img_url)
				}
			},
			getSelectImgIndex() {
				var index = -1
				for (let item in this.primeval_img) {
					if (this.primeval_img[item].value == this.select_img) {
						index = item
						break
					}
				}
				return index
			},
			// 打开选择图片
			openImgset() {
				this.$store.commit('IMAGE_LIBRAY', {
					status: true,
					type:'imgset',
					cropperImg: false,
					callback: (result) => {
						this.$store.dispatch('setImagesets', result.imgsetUrl)
					}
				})
			},
			// 选择轮播动画
			handleCommand(command) {
				this.animationName = this.dropdownList[command].name
				this.animationClass = this.dropdownList[command].class
			}
		},
		components: {
			VueCropper,
		}
	})
</script>

<style lang="scss" scoped>
	.el-dialog__body {
		padding: 20px;
	}

	.img-wrapper {
		overflow: hidden;
	}

	.cropper-container {
		width: 100%;
		height: 0;

	}

	.img-operate {
		border: 1px solid #dbdee6;
		padding: 20px 10px;

	}

	.image_crop {
		height: 340px;
		line-height: 340px;
		position: relative;
		width: 580px;
		background-color: #ccc;
		text-align: center;
	}

	.img-wrapper {
		padding: 0;
	}

	.img-abbre {
		margin-top: 10px;

	}

	.img-abbre ul {
		margin-right: -20px;
	}

	.img-abbre ul li {
		width: 80px;
		height: 80px;
		line-height: 80px;
		background: #ccc;
		float: left;
		text-align: center;
		margin-right: 20px;
		position: relative;
		cursor: pointer;

		.icon-delete-two {
			position: absolute;
			color: #fff;
			top: 5px;
			right: 5px;
			color: #fff;
			font-size: 20px;
			height: 20px;
			line-height: 20px;

		}

		.icon-icon-- {
			position: absolute;
			color: #fff;
			bottom: 5px;
			right: 5px;
			color: #fff;
			font-size: 20px;
			height: 20px;
			line-height: 20px;
		}
	}

	.img-abbre ul li img {
		width: 80px;
		height: 80px;
	}

	.icon-add {
		font-size: 48px;
		color: #fff;
	}

	.block .el-button {
		width: 100%;

		.el-icon--right {
			position: relative;
			right: 0;
		}
	}

	.flex-between {
		display: flex;
		justify-content: space-between;
	}
	.marbottom-10{
		margin-bottom: 10px;
	}
	
</style>
